<template>
  <el-container style="height: 100%">
    <el-header height="350px">
      <el-table
        :data="all_demand_group"
        highlight-current-row
        @current-change="loadDetails"
        stripe
        height="100%"
      >
        <el-table-column
          v-for="column in cut_demand_sum_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, cut_demand_sum_define)
            }
          "
        />
        <el-table-column :width="140" label="操作">
          <template #default="scope">
            <el-button
              size="small"
              :disabled="scope.row.computed"
              @click="show_coil_width_panel = true"
              >选材</el-button
            >
            <el-button
              size="small"
              :disabled="scope.row.computed"
              type="primary"
              @click="optimize(scope.row)"
              >试算</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-header>
    <el-main>
      <el-table :data="current_demand_group_detail" stripe height="100%">
        <el-table-column
          v-for="column in cut_demand_detail_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, cut_demand_detail_define)
            }
          "
        />
      </el-table>
      <el-dialog @opened="fillSelected" v-model="show_coil_width_panel" title="选材">
        <el-divider></el-divider>
        <el-table ref="multiple_table_ref" :data="current_coils_width_options" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column property="width" label="宽度" />
          <el-table-column property="stock_length" label="总长" />
          <el-table-column property="stock_pcs" label="总件数" />
        </el-table>
        <template #footer>
          <el-button type="primary" @click="confirm_width">确认</el-button>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import type { cut_demand_detail, cut_demand_sum, cut_process } from '@/types/billdata'
import type { t_coils_width_options } from '@/types/producedata'
import { onMounted, ref, nextTick } from 'vue'
import { fill_ref_info, cell_formatter } from '@/utils/common'
import { cut_demand_sum_define, cut_demand_detail_define } from '@/meta/index'
import { ElTable, ElMessageBox } from 'element-plus'
import { coil_usage_cal } from '@/utils/cutUsageCal'
import { useRouter } from 'vue-router'
import { list_coils_width_by_height } from '@/utils/dataUtils'
import { useDbStore } from '@/stores/modules/database'
const router = useRouter()
const multiple_table_ref = ref<InstanceType<typeof ElTable>>()
const dbStore = useDbStore()
const current_coils_width_options = ref<t_coils_width_options[]>([])
const all_demand_group = ref<cut_demand_sum[]>()
const current_demand_group_detail = ref<cut_demand_detail[]>()
const current_bills = ref<cut_demand_sum>()
const show_coil_width_panel = ref(false)

const loadDetails = (val: cut_demand_sum) => {
  current_bills.value = val
  const details = val.details
  fill_ref_info(details, cut_demand_detail_define)
  current_demand_group_detail.value = details
}
const fillSelected = () => {
  current_coils_width_options.value = list_coils_width_by_height(
    current_bills.value!.height,
    typeof current_bills.value!.metal === 'string'
      ? current_bills.value!.metal
      : current_bills.value!.metal.code
  ).sort((a, b) => a.width - b.width)
  nextTick(() => {
    current_coils_width_options.value.forEach((r) => {
      multiple_table_ref.value!.toggleRowSelection(
        r,
        current_bills.value!.supply_width!.indexOf(r.width) >= 0
      )
    })
  })
}
const confirm_width = () => {
  const selected = multiple_table_ref.value!.getSelectionRows() as t_coils_width_options[]
  current_bills.value!.supply_width!.length = 0
  selected.forEach((r) => {
    current_bills.value!.supply_width!.push(r.width)
  })
  show_coil_width_panel.value = false
  multiple_table_ref.value!.clearSelection()
}
const optimize = (val: cut_demand_sum) => {
  const ready = current_bills.value!.supply_width!.length > 0
  if (!ready) {
    ElMessageBox.alert('需要先选料再进行运算', '提示')
    return
  }

  const process: cut_process[] = dbStore.cut_process.filter((r) => r.groupcode !== val.billcode)
  const result = coil_usage_cal(val)
  result.forEach((r) => process.push(r))
  dbStore.saveCutProcess(process)
  val.computed = true
  dbStore.saveCutDemandSum(all_demand_group.value!)
  router.push({ path: '/proposeListAdv' })
}
onMounted(() => {
  const cut_demand_sum = dbStore.cut_demand_sum
  all_demand_group.value = cut_demand_sum
  if (cut_demand_sum.length > 0) loadDetails(cut_demand_sum[0])
})
</script>
<style scoped></style>
